<template>
  <div class="box1">
    <el-form-item label="法律信息" label-width="120px" style="width: 94%">
      <div v-for="(item, index) in info" :key="index" class="sysItem">
        <el-select
          v-if="item.hasOwnProperty('notFrist')"
          v-model="item.boolType"
          style="width: 80px; margin-right: 10px"
        >
          <el-option label="AND" value="1"></el-option>
          <el-option label="OR" value="2"></el-option>
          <el-option label="NOT" value="3"></el-option>
        </el-select>
        <el-select
          v-if="!item.hasOwnProperty('notFrist')"
          v-model="item.key"
          placeholder="--请选择--"
          style="width: 300px; margin-bottom: 6px"
        >
          <el-option label="法律状态" value="legal_status"></el-option>
          <el-option label="许可次数" value="licensed_count"></el-option>
          <el-option label="转让次数" value="transfered_count"></el-option>
          <el-option label="质押次数" value="pledges_count"></el-option>

          <el-option label="被引用次数" value="cited_count"></el-option>
          <el-option
            label="专利被提起无效次数"
            value="patent_invalidation_count"
          ></el-option>
        </el-select>

        <el-select
          v-if="item.hasOwnProperty('notFrist')"
          v-model="item.key"
          placeholder="--请选择--"
          style="width: 210px; margin-bottom: 6px"
        >
          <el-option label="法律状态" value="legal_status"></el-option>
          <el-option label="许可次数" value="licensed_count"></el-option>
          <el-option label="转让次数" value="transfered_count"></el-option>
          <el-option label="质押次数" value="pledges_count"></el-option>

          <el-option label="被引用次数" value="cited_count"></el-option>
          <el-option
            label="专利被提起无效次数"
            value="patent_invalidation_count"
          ></el-option>
        </el-select>

        <el-input
          @blur="
            () => {
              inputListen(item);
            }
          "
          v-if=" (keys.indexOf(item.key) > -1)  && item.key !=='legal_status'   "
          class="inputView"
          placeholder="输入数字或区间;例如 ‘123’ 或 ‘1-5’"
          v-model="item.value"
        ></el-input>

        <el-input
          @blur="
            () => {
              inputListen(item);
            }
          "
          v-if=" (keys.indexOf(item.key) > -1)  && item.key =='legal_status'   "
          class="inputView"
          placeholder="可输入有效、无效或在审三种状态"
          v-model="item.value"
        ></el-input>




        <el-input
          v-if="!(keys.indexOf(item.key) > -1)"
          class="inputView"
          v-model="item.value"
        ></el-input>

        

        <i
          @click="addLegal"
          style="position: absolute;right: -30px;fontSize: 20px;marginTop: 5px;color:#008ac0;font-weight:700"
          v-if="!item.hasOwnProperty('notFrist')"
          class="el-icon-circle-plus-outline"
        ></i>
        <i
          @click="deltLegal(index)"
          style="position: absolute;right: -30px;fontSize: 20px;marginTop: 5px;color:#008ac0;font-weight:700"
          v-if="item.hasOwnProperty('notFrist')"
          class="el-icon-remove-outline"
        ></i>
      </div>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: "LegalItem",
  props: {},
  watch: {
    info: {
      handler(newV, OldV) {
        this.$emit("done", this.translateForm(newV));
      },
      deep: true,
    },
  },
  data() {
    return {
      result: [],
      keys: [
        "legal_status",
        "licensed_count",
        "transfered_count",
        "pledges_count",
        "cited_count",
        "patent_invalidation_count",
      ],
      info: [
        {
          value: "",
          key:"legal_status"
        },
      ],
    };
  },
  methods: {
    inputListen(item) {
      let reg = /^[0-9]+\-[0-9]+$|^[0-9]+$/;

      if (reg.test(item.value)) {
        let arr = item.value.split("");
        if (arr.indexOf("-") > -1) {
          if (item.value.split("-")[0] > item.value.split("-")[1]) {
            item.value = "";
          }
        }
      } else {
        item.value = "";
      }
    },
    translateForm(newV) {
      let tempArr = [];
      let list = JSON.parse(JSON.stringify(newV));
      list.forEach((item, index) => {
        if (item.hasOwnProperty("key") && item.value.trim()) {
          let obj;
          if (this.keys.indexOf(item.key) > -1) {
            let arr = item.value.split("");
            if (arr.indexOf("-") > -1) {
              if (item.value.split("-")[0] > item.value.split("-")[1]) {
                // newV[index].value=""
              } else {
                obj = {
                  fieldName: item.key,
                  value1: item.value.split("-")[0].replace(/\s*/g, ""),
                  value2: item.value.split("-")[1].replace(/\s*/g, ""),
                  boolType: item.hasOwnProperty("boolType")
                    ? item.boolType
                    : 2,
                };
                tempArr.push(obj);
              }
            } else {
              obj = {
                fieldName: item.key,
                value1: item.value.replace(/\s*/g, ""),
                value2: item.value.replace(/\s*/g, ""),
                boolType: item.hasOwnProperty("boolType")
                  ? item.boolType
                  : 2,
              };
              tempArr.push(obj);
            }
          } else {
            obj = {
              fieldName: item.key,
              value1: item.value.replace(/\s*/g, ""),
              boolType: item.hasOwnProperty("boolType") ? item.boolType : 1,
            };
            tempArr.push(obj);
          }
        }
      });

      return tempArr;
    },

    addLegal() {
      if (this.info.length < 4) {
        let obj = {
          value: "",
          notFrist: true,
          boolType: "1",
        };
        this.info.push(obj);
      }
    },
    deltLegal(index) {
      //  console.log(index)
      this.info.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.box1 {
  width: 100%;
   background-color: #ffffff;
  // height:40px;
  ::v-deep .el-form-item__label {
    text-align: left;
    font-size: 12px;
    // color: red;
  }
  .sysItem {
    width: 100%;
    display: flex;
    flex-direction: row;
    .inputView {
      flex: 1;
      margin-left: 10px;
    }
  }
}
</style>
